<template>
  <section class="page">
    <headerbar>添加通知</headerbar>

    <section class="inner-content">

      <ul class="line-tab">
        <li @click="tabIndex=0" :class="{'active':tabIndex==0}"><span>通知信息</span></li>
        <li @click="tabIndex=1" :class="{'active':tabIndex==1}"><span>通知附件</span></li>
      </ul>

      <section v-if="tabIndex===0">
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>标题：</div>
          <div class="value"><input type="text" placeholder="请输入标题" v-model="data.title"></div>
        </div>
        <!-- 1为 组织通知，2为 党员通知-->
        <template v-if="sendOrigin==1 && !isDang">
          <div class="text-block" @click="selectPerson('attendUserName')">
            <div class="name color-default input-name"><i class="required color-red">*</i>通知范围：</div>
            <div class="value"><input readonly type="text" placeholder="下一级党组织" v-model="data.attendUserName"></div>
          </div>
        </template>
        <!-- 1为 组织通知，2为 党员通知-->
        <template v-if="sendOrigin==2 && !isDang">
          <div class="text-block" @click="showDataScope()">
            <div class="name color-default input-name"><i class="required color-red">*</i>通知范围：</div>
            <div class="value"><input readonly v-model="data.dataScopeLabel" type="text" placeholder="请选择通知范围"></div>
          </div>
          <div v-if="data.dataScope=='custom'" class="text-block" @click="selectPerson('attendUserName')">
            <div class="name color-default input-name"><i class="required color-red">*</i>选择人员：</div>
            <div class="value"><input readonly type="text" placeholder="请选择人员" v-model="data.attendUserName"></div>
          </div>
        </template>

        <div v-if="sendOrigin==2 && isDang" class="text-block" @click="selectPerson('attendUserName')">
          <div class="name color-default input-name"><i class="required color-red">*</i>通知范围：</div>
          <div class="value"><input readonly type="text" placeholder="本党支部人员" v-model="data.attendUserName"></div>
        </div>
        <div class="text-block" @click="isFeedBack()">
          <div class="name color-default input-name"><i class="required color-red"></i>是否反馈：</div>
          <div class="value"><input readonly type="text" placeholder="请选择是否反馈" v-model="data.feedBackLabel"></div>
        </div>
        <div class="text-block" @click="isMustRead()">
          <div class="name color-default input-name"><i class="required color-red"></i>是否必读：</div>
          <div class="value"><input readonly type="text" placeholder="请选择是否必读" v-model="data.mustReadLabel"></div>
        </div>
        <div class="text-block" @click="isSendSms()">
          <div class="name color-default input-name"><i class="required color-red"></i>是否发短信：</div>
          <div class="value"><input readonly type="text" placeholder="请选择是否必读" v-model="data.sendSmsLabel"></div>
        </div>
        <div class="text-block" v-if="data.feedBackLabel === '是'">
          <div class="name color-default input-name"><i class="required color-red"></i>接收反馈：</div>
          <div class="value flex-between">
            <span></span>
            <div class="flex" style="width:10em;white-space: nowrap;"><inputNumber :defaultNumber="0.5" :minNumber="0.5" :step="0.5" :maxNumber="100" v-model="data.laterHourFeedback"></inputNumber><span class="no-wrap"><i class="pdh-3"></i>小时后</span></div>

            <!--<input type="number" placeholder="" min='0' max="100" v-model="data.laterHourFeedback" v-maxNumber="100">--></div>
        </div>
        <div class="text-block">
          <!--<div class="name  color-default input-name"><i class="required color-red">*</i>通知内容：</div>
          <div class="value">
            <textarea v-model="data.content" placeholder="请填写通知内容" name="" id="" cols="30" rows="5"></textarea>
          </div>-->
          <div class="input-row-wrap">
            <div class="name"><i class="required color-red">*</i>通知内容：</div>
            <textarea v-model="data.content" placeholder="请填写通知内容" name="" id="" cols="40" rows="10"></textarea>
          </div>
        </div>
      </section>

      <!--通知附件-->
      <section v-if="tabIndex==1" >
        <div class="mgt-10 color-tip mgb-1"><i class="required color-red">严禁上传或录入涉密内容</i></div>
        <div class="mgt-10 color-tip mgb-1">通知附件</div>
        <cube-upload ref="upload"
                     action=""
                     v-model="files"
                     accept="*/*"
                     :simultaneous-uploads="1"
                     @files-added="uploadFile"
                     @file-removed="fileRemoved"
                     @input="onInput"
        />
      </section>

      <div class="mgt-10"></div>
      <div v-preventReClick="1000" @click="checkParam($event)" class="default-block-btn">提交</div>
      <div class="mgt-10"></div>
    </section>
  </section>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import inputNumber from '@/components/common/inputNumber'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  import fileIcon from '../../../../static/images/up_document.png'

  export default {
    components: {inputNumber},
    name: 'organizationalLifeAdd',
    data () {
      return {
        fn: tools,
        data: {
          title: '',
          dataScope: 'custom',
          dataScopeLabel: '',
          feedBack: '0',
          feedBackLabel: '否',
          mustRead: '0',
          mustReadLabel: '否',
          sendSms: '0',
          sendSmsLabel: '否',
          attendUserId: '',
          attendUserName: '',
          content: '',
          laterHourFeedback: 0.5
        },
        dataScopeList: [],
        isDang: true,
        sendOrigin: '',
        tabIndex: 0,
        attachmentList: [],
        files: []
      }
    },
    created () {
      this.sendOrigin = this.$route.params.sendOrigin
      this.isDang = this.$store.state.isDang
      /**
       * sendOrigin： 1为 组织通知，2为 党员通知
       *
       * 发送通知的情形
       * 1、普通党员进入无添加权限，应隐藏“添加”按钮
       2、党支部管理员进入可发送“党员通知”，“组织通知”应为灰色，不可点击
       3、非党支部管理员进入可发送“党员通知”、“组织通知”

       党支部管理员发送“党员通知”页面：默认“通知范围”显示的是“本党支部人员”，点击直接进入选择人员列表，去掉弹出选择“本党支部人员”、“自定义”选项。
       非党支部管理员发送“党员通知”页面：“通知范围”选择改为“所有党员”、“自定义”，选择“所有党员”不用选择人员，选择“自定义”需要弹出人员搜索框（请输入党员姓名），点击搜索按钮展示搜索结果列表（姓名、党支部），可在列表进行勾选人员，将勾选人员列在已选人员列表，可在同一搜索页面进行多次查询勾选人员。
       非党支部管理员发送“组织通知”页面：默认“通知范围”为“下一级党组织”，点击直接跳转到组织选择列表，去掉弹出选择“下级党组织”、“自定义”选项，并且在选择组织列表的头部标题应为“选择组织”。
       */
      if (this.sendOrigin === '1') {
        this.dataScopeList = [{
          scope: 'custom',
          content: '下级党组织'
        }, {
          scope: 'custom',
          content: '自定义'
        }
        ]
      } else {
        this.dataScopeList = [{
          scope: 'all_user',
          content: '所有党员'
        }, {
          scope: 'custom',
          content: '自定义'
        }
        ]
      }
      if (this.$store.state.flagType) {
        this.resetData()
        this.$store.state.flagType = false
      } else {
        this.resumeData()
      }
    },
    methods: {
      resetData () {
        this.data = {
          title: '',
          dataScope: 'custom',
          dataScopeLabel: '',
          feedBack: '0',
          feedBackLabel: '否',
          mustRead: '0',
          mustReadLabel: '否',
          sendSms: '0',
          sendSmsLabel: '否',
          attendUserId: '',
          attendUserName: '',
          content: ''
        }
      },
      checkParam (e) {
        if (e.target.disabled) {
          return false
        }
        if (this.data.title === '') {
          return tools.tip('请输入标题！')
        }
        if (this.data.dataScope === '') {
          return tools.tip('请选择通知范围！')
        }
        if (this.sendOrigin === '1' && !this.isDang && this.data.attendUserId === '') {
          return tools.tip('请选择组织！')
        } else if (this.data.dataScope === 'custom' && this.data.attendUserId === '') {
          return tools.tip('请选择通知人员！')
        }
        if (this.data.content === '') {
          return tools.tip('请填写通知内容！')
        }
        if (this.data.sendSms === '1') {
          let mans = this.data.attendUserId.split(',')
          if (mans && mans.length > 100) {
            return tools.tip('由于人数过多，短信发送功能无效！')
          }
        }
        // this.data.dataScope = this.sendOrigin == 1 ? 'all_dzb_user' : 'n_dzx'
        // if (this.data.attendUserName) {
        //   this.data.dataScope = 'custom'
        // }
        this.submit()
      },
      submit () {
        let data = {
          'title': this.data.title,
          'nodeMsg': this.data.content,
          'dataScope': this.data.dataScope,
          'assignUserIds': this.data.attendUserId,
          'feedBack': this.data.feedBack,
          'mustRead': this.data.mustRead,
          'sendSms': this.data.sendSms,
          'sendOrigin': this.sendOrigin,
          'annexInfo': JSON.stringify(this.attachmentList),
          'laterHourFeedback': this.data.laterHourFeedback
        }
        loginService.optSaveNodeMsgAdd(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          } else {
            tools.tip('保存成功')
            tools.back()
          }
        })
      },
      // 选择人员
      selectPerson (modelName) {
        this.$store.state.sendOrigin = this.sendOrigin
        this.storeData()
        this.$router.push({path: `/personnelSelection/${modelName}`})
      },
      storeData () {
        this.$store.state.organizationalLifeAddData = this.data
      },
      clearStore () {
        delete this.$store.state.organizationalLifeAddData
      },
      resumeData () {
        if (this.$store.state.organizationalLifeAddData) {
          this.data = this.$store.state.organizationalLifeAddData
        }
        // if (this.$store.state.scheduleTypeSelected) {
        //   let arrNames = []
        //   let arrKeys = []
        //   this.$store.state.scheduleTypeSelected.forEach((v) => {
        //     arrKeys.push(v.value)
        //     arrNames.push(v.name)
        //   })
        //   this.data.typeLabel = arrNames.join(',')
        //   this.data.type = arrKeys.join(',')
        //   console.log('------------type=', this.data.type)
        // }
      },
      // 是否反馈
      isFeedBack () {
        this.$createActionSheet({
          title: '是否反馈',
          active: 10,
          data: [
            {
              scope: '0',
              content: '否'
            },
            {
              scope: '1',
              content: '是'
            }
          ],
          onSelect: (item, index) => {
            this.data.feedBackLabel = item.content
            this.data.feedBack = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 是否必读
      isMustRead () {
        this.$createActionSheet({
          title: '是否必读',
          active: 10,
          data: [
            {
              scope: '0',
              content: '否'
            },
            {
              scope: '1',
              content: '是'
            }
          ],
          onSelect: (item, index) => {
            this.data.mustReadLabel = item.content
            this.data.mustRead = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 是否发短信
      isSendSms () {
        this.$createActionSheet({
          title: '否发短信',
          active: 10,
          data: [
            {
              scope: '0',
              content: '否'
            },
            {
              scope: '1',
              content: '是'
            }
          ],
          onSelect: (item, index) => {
            this.data.sendSmsLabel = item.content
            this.data.sendSms = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 数据范围
      showDataScope () {
        this.$createActionSheet({
          title: '通知范围',
          active: 10,
          data: this.dataScopeList,
          onSelect: (item, index) => {
            this.data.dataScopeLabel = item.content
            this.data.dataScope = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      go (name) {
        this.$router.push({name: name})
      },
      hasShyk () {
        return this.data.type.indexOf('shyk') !== -1
      },
      makeStr (arr) {
        return JSON.stringify(arr)
        let arrImg = []
        arr.forEach((v) => {
          arrImg.push(`{'fileid':'${v.fileid}', 'type':'1'}`)
        })
        return `[${arrImg.join(',')}]`
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.attachmentList.push({
            'fileid': res.data.fileId,
            'filename': uploadFile.name,
            'totalBytes': res.data.totalBytes,
            'type': '1'
          })
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      }
    }
  }
</script>

<style scoped>

</style>
